<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三角制作</title>
</head>
<style>
.box1{
  width: 0;
  height: 0;
  /* border: 50px solid yellow;   */
  border: 50px solid transparent;
  border-top-color:yellow ; 
  margin: 200px auto;
}
.box2{
  width: 0;
  height: 0;
  /* border: 50px solid yellow;   */
  border-top: 50px solid yellow ; 
  border-left: 50px solid blue;
  border-right: 50px solid red;
  border-bottom: 50px solid rgb(225, 0, 255);
  margin: 200px auto;
}
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>